<template>
  <el-row class="perspect-manage-container">
    <basic-container
      :style="{ height: allWindowTopBodyHeight + 'px' }"
      class="fag-manage-content"
    >
      <avue-crud
        :option="faqTableOption"
        :data="faqTableData"
        ref="crudFaqTable"
        :page.sync="faqTablePage"
        :table-loading="loading"
        @select="selectRow"
        @selection-change="selectionChange"
        @select-all="selectionALL"
        @on-load="onLoad"
      >
        <template slot="header">
          <div class="kw-header">
            <div id="kw-form-container" style="margin: 0px; padding: 0">
              <div class="kw-form-form">
                <el-input
                  size="small"
                  :placeholder="$t('kwRobotStudy.inputContent')"
                  v-model="intentionName"
                  clearable
                  class="kw-form-type"
                >
                </el-input>
              </div>
              <div class="kw-form-btn">
                <el-button
                  size="small"
                  type="primary"
                  icon="el-icon-search"
                  class="kw-search-btn"
                  @click="handlerSearch"
                ></el-button>
                <el-button
                  size="small"
                  class="kw-reset-btn"
                  @click="handlerReset"
                ><i class="aicosicon aicos-icon-clear"></i
                ></el-button>
              </div>
            </div>
          </div>
        </template>
      </avue-crud>
    </basic-container>
    <div
      class="chooseed-spective-wrap"
      :style="{ height: allWindowTopBodyHeight + 'px' }"
    >
      <h5 class="chooseed-spective-header">{{ $t("aicosCommon.selectKw") }}</h5>
      <div class="chooseed-spective-content">
        <div class="chooseed-cate-item">
          <!--<p class="cate-name">分类一</p>-->
          <ul v-if="curSelectedPerspects.length > 0">
            <li
              v-for="perspectItem in curSelectedPerspects"
              :key="perspectItem.id"
            >
              <span class="perspect-tag-text" :title="perspectItem.intentName?perspectItem.intentName:perspectItem.question">
                {{perspectItem.intentName?perspectItem.intentName:perspectItem.question }}
              </span>
              <i
                class="perspect-tag-close el-icon-close"
                @click="deletePersItem(perspectItem)"
              ></i>
            </li>
          </ul>
          <p
            style="
              text-align: center;
              color: rgb(188 187 187);
              padding-top: 20px;
            "
            v-else
          >
            {{ $t("doc.selectKnowledgeTips") }}
          </p>
        </div>
      </div>
    </div>
  </el-row>
  <!--<someComponent></someComponent>-->
</template>

<script>
import { mapGetters } from "vuex";
import { loadListUrl } from "@/api/kwKnowledgeCenter/kwKnowledgeMangement/kwTabManagement/index.js";
import LeftTree from "@/components/kwLeftTree/index";
import {intentList} from "@/api/kwKnowledgeCenter/kwIntention";
export default {
  inject: ["desktopWindow", "desktop"],
  props: {
    // 选中的视角
    faqData: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    let that = this;
    return {
      curPageData: [],
      botId: "",
      classType: "tableQa", // 树的类型
      curSelectedPerspects: [], // 选中的视角
      allWindowTopBodyHeight: 700, // 弹框高度
      perspectRadios: {},
      loading: false,
      curSelectedTreeNode: {},
      curTreeNodeId: "", //默认左侧列表id
      selectedCateName: "", //默认左侧列表的名字
      viewTypeList: [], //视角类型列表
      viewName: "", //搜索用的视角名称
      tableListId: "", //列表数据的id
      queryObj: {
        // titleType: "1",
        question: "",
      },
      intentionName: '', //意图名称
      faqTableData: [],
      faqTablePage: {
        total: 0,
        currentPage: 1,
        pageSize: 10,
      },
      faqTableOption: {
        searchShowBtn: false,
        refreshBtn: false,
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        dialogWidth: "60%",
        columnBtn: false,
        border: true,
        index: false,
        addBtn: false,
        selection: true,
        editBtn: false,
        delBtn: false,
        viewBtn: false,
        menu: false,
        menuWidth: 300,
        menuAlign: "center",
        dialogClickModal: false,
        labelWidth: 120,
        height: 550,
        emptyText:this.$t('aicosCommon.notData'),
        column: [
          {
            label: this.$t("kwIntentionManage.intentionName"), //意图名称
            prop: "intentName",
            overHidden: true,
            html:true,
            // formatter: (val, value, label) => {
            //   var showHtml = ''
            //   if (this.validatenull(value)) {
            //     showHtml = "--";
            //   } else if (
            //     (val.intentType == 1 && (val.bindFaqKnowledgeCount + val.knowledgeCount + val.childCount + val.bindKnowledgeCount+ val.bindTableKnowledgeCount)<=0) ||
            //     (val.intentType == 2 && (val.commonCount +val.dialogueProcessCount + val.regularCount) <=0) ||
            //     (val.intentType ==3 && (val.bindIntentId ==null || val.bindIntentId == "-1"))
            //   ) {
            //     //被引用
            //     if(val.intentType ==1){
            //       showHtml = `<img class="quoteImg" style="width: 16px; height: 16px margin-right: 5px;vertical-align: sub;cursor:pointer" title="请检查意图主题或相似问以及子意图或关联知识是否全部配置" src="`+that.noQuoteGrey+`"/>` + label
            //     }else if (val.intentType ==2) {
            //       showHtml = `<img class="quoteImg" style="width: 16px; height: 16px margin-right: 5px;vertical-align: sub;cursor:pointer" title="请检查意图相似问与跳转话术(任意)是否全部配置" src="`+that.noQuoteGrey+`"/>` + label
            //     }else if (val.intentType ==3) {
            //       showHtml = `<img class="quoteImg" style="width: 16px; height: 16px margin-right: 5px;vertical-align: sub;cursor:pointer" title="请检查意图相似问与跳转意图是否全部配置" src="`+that.noQuoteGrey+`"/>` + label
            //     }
            //   } else {
            //     showHtml = label
            //   }
            //   return showHtml;
            // },
          },
          {
            label: this.$t("kwIntentionManage.intentionType"), //意图类型
            prop: "intentType",
            formatter: (val, value, label) => {
              var name
              if(val.intentType == 1){
                name = this.$t("kwIntentionManage.answerType")
              }else if (val.intentType == 2) {
                name = this.$t("kwIntentionManage.taskType")
              }else if (val.intentType == 3) {
                name = this.$t("kwIntentionManage.jumpIntention")
              }
              return name;
            },
          },
          {
            label: this.$t("kwIntentionManage.intentTheme"), //意图主题
            prop: "intentTheme",
            overHidden: true,
            formatter: (val, value, label) => {
              if (this.validatenull(value)) {
                return "--";
              }
              return label;
            },
          },
          // {
          //   label: this.$t("kwIntentionManage.intentionStatus"), //训练状态
          //   prop: "trainingFlag",
          // },
          {
            label: this.$t("kwIntentionManage.commonAnswer"), //常用问法
            prop: "commonCount",
          },
          {
            label: this.$t("kwIntentionManage.regular"), //正则表达式
            prop: "regularCount",
          },
        ],
      },
    };
  },
  components: {
    LeftTree,
  },
  computed: {
    ...mapGetters(["botObj"]),
  },
  methods: {
    //获取树的node和resolve
    getNode(data) {
      this.node = data.node;
      this.resolve = data.resolve;
    },
    //左侧树节点点击,右侧区域响应
    nodeClick(nodeId) {
      var tree = this.$refs.tree.$refs.tree;
      var curNode = tree.getNode(nodeId);

      this.curSelectedTreeNode = curNode;
      this.curTreeNodeId = curNode.data.id;

      this.onLoad();
    },

    // 选中知识
    selectRow(list, row) {
      var isChecked = false;
      var selectedIds = [];

      this.curSelectedPerspects.forEach((item) => {
        selectedIds.push(item.id);
      });

      // 判断是否选中
      list.every((item) => {
        if (item.id == row.id) {
          isChecked = true;
          if (selectedIds.join(",").indexOf(row.id) < 0) {
            this.curSelectedPerspects.push(row);
          }
          return false;
        }

        isChecked = false;
        return true;
      });

      if (!isChecked) {
        // 取消选中
        this.curSelectedPerspects.every((item, index) => {
          if (item.id == row.id) {
            this.curSelectedPerspects.splice(index, 1);
            return false;
          }
          return true;
        });
      }
    },

    selectionChange() {
      // console.log(list, 'change');
    },

    mergeData(data) {
      data.forEach(item => {
        this.curPageData.push(item); // 将当前项添加到 curPageData
        if (item.children && item.children.length > 0) {
          this.mergeData(item.children); // 递归合并子项的 children
        }
      });
      return this.curPageData;
    },

    mergeDataList(data){
      data.forEach(item => {
        this.curSelectedPerspects.push(item); // 将当前项添加到 curPageData
        if (item.children && item.children.length > 0) {
          this.mergeData(item.children); // 递归合并子项的 children
        }
      });
      return this.curSelectedPerspects;
    },

    // 选中all
    selectionALL(list) {
      this.curPageData = []; // 清空当前页数据
      var selectedIds = [];
      this.curPageData = this.mergeData(this.faqTableData); // 当前页的数据
      var curPageDataIds = []; // 当前页数据ids
      this.curSelectedPerspects.forEach((item) => {
        selectedIds.push(item.id);
      });

      if (list.length > 0) {
        // 全选
        this.mergeDataList(list);
        // list.forEach((item) => {
        //   if (selectedIds.join(",").indexOf(item.id) < 0) {
        //     // 说明没有
        //     this.curSelectedPerspects.push(item);
        //     if(item.children && item.children.length > 0){
        //       this.curSelectedPerspects.push(item);
        //     }
        //   }
        // });
      } else {
        // 取消全选
        this.curPageData.forEach((item) => {
          curPageDataIds.push(item.id);
        });

        this.curSelectedPerspects = this.curSelectedPerspects.filter((item) => {
          if (curPageDataIds.indexOf(item.id) < 0) {
            return item;
          }
        });
      }
    },

    // 删除视角
    deletePersItem(row) {
      this.curPageData = this.mergeData(this.faqTableData); // 当前页的数据
      var curPageDataIds = []; // 当前页数据ids

      this.curPageData.forEach((item) => {
        curPageDataIds.push(item.id);
      });

      this.curSelectedPerspects.every((item, index) => {
        if (item.id == row.id) {
          this.curSelectedPerspects.splice(index, 1);
          if (curPageDataIds.indexOf(item.id) >= 0) {
            this.$refs.crudFaqTable.toggleSelection([item], false);
          }
          return false;
        } else {
          // 添加 push
          return true;
        }
      });
    },

    //获取右侧表格数据
    onLoad() {
      const info = {
        botId: this.botObj.id,
        classifyId: 0,
        current: this.faqTablePage.currentPage,
        size: this.faqTablePage.pageSize,
        intentName: this.intentionName, //意图名称
        intentType: '', //意图类型
        trainingFlag: '', //训练状态
        quoteFilterType: '',
        intentRelevance: '',
        intentAsk: '',
      };

      this.loading = true;
      intentList(info).then(res=>{
        if (res.data.code == 200) {
          // console.log(result.data);
          this.faqTableData = res.data.data.records;
          this.tableDataHandle(this.faqTableData, "children");
          this.faqTablePage.total = res.data.data.total;
          this.loading = false;
        }
      })
      // loadListUrl(info).then((resData) => {
      //   resData = resData.data;
      //   if (resData.code == 200) {
      //     this.faqTableData = resData.data.records;
      //     // this.tableDataHandle(this.data, "children");
      //     this.faqTablePage.total = resData.data.total;
      //     this.loading = false;
      //
      //     if (this.curSelectedPerspects.length > 0) {
      //       this.$refs.crudFaqTable.toggleSelection(
      //         this.curSelectedPerspects,
      //         true
      //       );
      //     }
      //   }
      // });
    },

    //处理获取到的树型表格数据
    tableDataHandle(arr, key, level = 0, indexLine = []) {
      level = level + 1;
      arr.map((item, idx) => {
        item.level = level;
        item.indexLine = Object.assign([], indexLine);
        item.indexLine.push(idx);
        item.parentLength = arr.length;
        if (item[key]) {
          this.tableDataHandle(item[key], key, level, item.indexLine);
        }
      });
      return arr;
    },

    //搜索列表
    handlerSearch() {
      this.onLoad();
    },
    //重置搜索结果
    handlerReset() {
      this.intentionName = "";
      this.onLoad();
    },

    // 保存选中的视角
    saveSimilarQuesion() {
      var similarDatas = [];

      this.curSelectedPerspects.forEach((item) => {
        similarDatas.push({
          id: item.id,
          question: item.intentName,
          intentTheme: item.intentTheme,
        });
      });
      return similarDatas;
    },
  },
  created() {
    // 获取机器人id
    this.botId = this.botObj.id;
  },
  mounted() {
    this.faqData.forEach((item) => {
      this.curSelectedPerspects.push(item);
    });
  },
  destroyed() {},
};
</script>

<style lang="scss" scoped>
.answer-table-container {
  p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
  }
  img {
    width: 20px !important;
    height: 20px !important;
  }
}

/deep/ {
  .avue-crud__menu {
    display: none;
  }

  .chooseed-spective-wrap .el-scrollbar__view {
    height: auto;
  }
}
.profile-config-template-scroll {
  padding-top: 10px;
}
/deep/ .profile-config-template-scroll .el-card__body {
  padding: 0 5px 0 10px;
}
/deep/ .el-table__row {
  p {
    margin: 0;
    padding: 0;
  }
}

#profileConfigList {
  padding: 0;
  margin: 0;

  .profile-config-item {
    list-style: none;
    height: 30px;
    line-height: 30px;
    padding-left: 10px;
    cursor: pointer;
  }

  .profile-config-item:hover {
    background-color: #f2f2f2;
  }

  .profile-config-item.item-this {
    background-color: #f2f2f2;
  }

  .profile-config-item p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    margin: 0;
    font-size: 14px;
  }
}
.perspect-manage-container {
  position: relative;
  //padding-left: 200px;
  padding-right: 200px;

  .fag-manage-tree {
    position: absolute;
    left: 0;
    width: 200px;
    background-color: #fff;
    margin: 0 -7px;
    border-right: 10px solid #f8f9fa;
  }

  .fag-manage-content {
    background-color: #fff;
    margin-left: 6px;
    margin-right: 6px;
    padding: 10px 0;
  }

  /deep/ .fag-manage-content .el-card__body {
    padding: 0;
  }

  .chooseed-spective-wrap {
    position: absolute;
    right: 0;
    top: 0;
    width: 200px;
  }
}

.chooseed-spective-wrap {
  border-left: 10px solid #f8f9fa;
  border-right: 1px solid #ebeef5;

  .chooseed-spective-content {
    height: calc(100% - 50px);
    overflow-y: auto;
  }

  .chooseed-spective-header {
    margin: 0;
    padding: 0 0 0 10px;
    font-size: 14px;
    border-bottom: 1px solid #ebeef5;
    font-weight: normal;
    height: 40px;
    line-height: 40px;
  }

  .chooseed-cate-item {
    padding: 5px 10px 0;

    .cate-name {
      background-color: #fafafa;
      height: 32px;
      line-height: 32px;
      margin: 0;
      padding: 0;
    }

    ul {
      padding: 0;
      margin: 0;
      list-style: none;

      li {
        background-color: #f4f4f5;
        color: #909399;
        margin: 0 0 10px 0;
        max-width: 100%;
        align-items: center;
        height: 24px;
        padding: 0 20px 0 4px;
        line-height: 22px;
        border: 1px solid #e9e9eb;
        border-radius: 4px;
        white-space: nowrap;
        font-size: 12px;
        position: relative;

        .perspect-tag-text {
          overflow: hidden;
          text-overflow: ellipsis;
          color: #909399;
          line-height: 22px;
          font-size: 12px;
          white-space: nowrap;
          max-width: 140px;
          display: inline-block;
        }

        .perspect-tag-close {
          color: #909399;
          background-color: #c0c4cc;
          border-radius: 50%;
          text-align: center;
          position: absolute;
          top: 3px;
          right: 4px;
          cursor: pointer;
          font-size: 12px;
          height: 16px;
          width: 16px;
          line-height: 16px;
          vertical-align: middle;
          transform: scale(0.8);
        }
      }
    }
  }
}
</style>
